/**
 * Created by bgy on 2016/12/5.
 * 采购计划列表
 */
import React from 'react';
import {hashHistory} from 'react-router';
import $ from '../../sources/jquery-2.2.4';

import PPlanHeader from '../../components/purchasePlan/PPlanHeader';

var plans = [
  {
    id: '1',
    title: '采购计划名称A',
    content: '采购信息正文采购信息正文采购信息正文采购信息正文采购信息正文采购信息正文采购信息正文信息正文采购信息正文采购信息正文采购信息正文采购信',
    date: '2016-12-22',
    cgs: '百果园'
  },
  {
    id: '2',
    title: '采购计划名称B',
    content: '采购信息正文采购信息正文采购信息正文采购信息正文采购信息正文采购信息正文采购信息正文信息正文采购信息正文采购信息正文采购信息正文采购信',
    date: '2016-12-22',
    cgs: '百果园'
  },
  {
    id: '3',
    title: '采购计划名称C',
    content: '采购信息正文采购信息正文采购信息正文采购信息正文采购信息正文采购信息正文采购信息正文信息正文采购信息正文采购信息正文采购信息正文采购信',
    date: '2016-12-22',
    cgs: '百果园'
  }
];
var sections = [];
var fruitClasses = [];
var sections = ['东莞采购中心', '山东栖霞红富士大仓', '新疆大仓', '东莞采购中心', '东莞采购中心', '东莞采购中心', '东莞采购中心', '东莞采购中心'];
var fruitClasses = ['品类一', '品类二', '品类三', '品类四', '品类五', '品类一', '品类一', '品类一'];
/**
 * 筛选窗口
 */
var AppFilter = React.createClass({
  getInitialState(){
    var sections = ['东莞采购中心', '山东栖霞红富士大仓', '新疆大仓', '东莞采购中心', '东莞采购中心', '东莞采购中心', '东莞采购中心', '东莞采购中心'];
    var fruitClasses = ['品类一', '品类二', '品类三', '品类四', '品类五', '品类一', '品类一', '品类一'];
    return {sections: sections, fruitClasses: fruitClasses};
  },
  showFruits: function () {

    var fruits = ['苹果', '苹果', '苹果', '苹果', '苹果', '苹果', '苹果'];
    var fruitList = fruits.map((f,i)=>
      <div className="fruit" key={i}>
        {f}
      </div>
    )
    fruitClass.appendChild(fruitList);
  },
  render() {
    var sectionList = this.state.sections.map((section, i)=>
      <div className="pur-item" key={'pur' + i}>{section}</div>
    );
    var fruitClassList = this.state.fruitClasses.map((fruitClass, j)=>
      <div>
        +<div className="fruitClass-item" key={'fClass' +j}>
          {fruitClass}
        </div>
        <div  className="fruit">

        </div>
      </div>
    );
    return (
      <div className={'apPlanFilter ' + this.props.hidden}>
        <div className="filter-content">
          <div className="popup">
            <div className="purchase-centers">
              <h2>区域</h2>
              <div className="pur-items" onClick={this.showFruits}>
                {sectionList}
              </div>
            </div>
          </div>
          <div className="fruits">
            <hr/>
            <h2 style={{height:'5rem',lineHeight:'5rem'}}>水果</h2>
            <hr/>
            <div className="fruitClass-items">
              {fruitClassList}
            </div>
          </div>
          <div className="btn-div">
            <div className="reset-div">
              重置
            </div>
            <div className="primary-div">
              完成
            </div>
          </div>
        </div>
      </div>
    )
  }
})
/**
 * 采购计划列表
 * @type {*|Function}
 */
var PPlanList = React.createClass({
  showFilter: function () {
    this.setState({hidden: ''});
  },
  getInitialState: function () {
    return {
      plans: plans,
      plans: plans,
      hidden: 'hidden',
      fruitClasses: []
    };
  },
  componentDidMount: function () {
  }, getDS: function () {
    //父组件调用子主键进行通信
    //this.refs.getSwordButton.getDragonKillingSword();
    alert(123);
  },
  showDetail: (id, event)=> {
    const path = 'pPlanDetail/' + id;
    hashHistory.push(path);
  },
  render: function () {
    var planList = [], plans = this.state.plans;
    for (let i = 0; i < plans.length; i++) {
      let plan = plans[i];

      if (i < plans.length - 1) {
        planList.push(
          <div className="pplanDiv" onClick={this.showDetail.bind(this,plan.id)} key={plan.id}>
            <h2 className="pplanTitle">{plan.title}</h2>
            <p className="pplanContent">{plan.content}</p>
            <div className="pplanBottom">
              <time>{plan.date}</time>
              <span>采购商：{plan.cgs}</span></div>
            <hr style={{marginTop:'1.1rem'}}/>
          </div>)
      } else {
        planList.push(
          <div className="pplanDiv" key={plan.id}>
            <h2 className="pplanTitle">{plan.title}</h2>
            <p className="pplanContent">{plan.content}</p>
            <div className="pplanBottom">
              <time>{plan.date}</time>
              <span>采购商：{plan.cgs}</span></div>
          </div>
        )
      }
    }
    return (
      <div className="full">
        <PPlanHeader title='采购计划' showFilter={this.showFilter}/>
        <div className="content">
          {planList}
        </div>
        <div className={'mask' + ' ' + this.state.hidden}></div>
        <AppFilter hidden={this.state.hidden}/>
      </div>
    )
  }
})
export default PPlanList;
